<!-- @format -->

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			* {
				box-sizing: border-box;
			}

			.slider {
				width: 560px;
				height: 400px;
				overflow: hidden;
			}

			.slider-wrapper {
				width: 100%;
				height: 320px;
			}

			.slider-wrapper img {
				width: 100%;
				height: 100%;
				display: block;
			}

			.slider-footer {
				height: 80px;
				background-color: rgb(100, 67, 68);
				padding: 12px 12px 0 12px;
				position: relative;
			}

			.slider-footer .toggle {
				position: absolute;
				right: 0;
				top: 12px;
				display: flex;
			}

			.slider-footer .toggle button {
				margin-right: 12px;
				width: 28px;
				height: 28px;
				appearance: none;
				border: none;
				background: rgba(255, 255, 255, 0.1);
				color: #fff;
				border-radius: 4px;
				cursor: pointer;
			}

			.slider-footer .toggle button:hover {
				background: rgba(255, 255, 255, 0.2);
			}

			.slider-footer p {
				margin: 0;
				color: #fff;
				font-size: 18px;
				margin-bottom: 10px;
			}

			.slider-indicator {
				margin: 0;
				padding: 0;
				list-style: none;
				display: flex;
				align-items: center;
			}

			.slider-indicator li {
				width: 8px;
				height: 8px;
				margin: 4px;
				border-radius: 50%;
				background: #fff;
				opacity: 0.4;
				cursor: pointer;
			}

			.slider-indicator li.active {
				width: 12px;
				height: 12px;
				opacity: 1;
			}
		</style>
	</head>

	<body>
		<div class="slider">
			<div class="slider-wrapper">
				<img src="../images/20241111/slider01.jpg" alt="" />
			</div>
			<div class="slider-footer">
				<p>对人类来说会不会太超前了？</p>
				<ul class="slider-indicator">
					<li class="active"></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
				<div class="toggle">
					<button class="prev">&lt;</button>
					<button class="next">&gt;</button>
				</div>
			</div>
		</div>
		<script>
			// 1. 初始数据
			const sliderData = [
				{
					url: "../images/20241111/slider01.jpg",
					title: "对人类来说会不会太超前了？",
					color: "rgb(100, 67, 68)",
				},
				{
					url: "../images/20241111/slider02.jpg",
					title: "开启剑与雪的黑暗传说！",
					color: "rgb(43, 35, 26)",
				},
				{
					url: "../images/20241111/slider03.jpg",
					title: "真正的jo厨出现了！",
					color: "rgb(36, 31, 33)",
				},
				{
					url: "../images/20241111/slider04.jpg",
					title: "李玉刚：让世界通过B站看到东方大国文化",
					color: "rgb(139, 98, 66)",
				},
				{
					url: "../images/20241111/slider05.jpg",
					title: "快来分享你的寒假日常吧~",
					color: "rgb(67, 90, 92)",
				},
				{
					url: "../images/20241111/slider06.jpg",
					title: "哔哩哔哩小年YEAH",
					color: "rgb(166, 131, 143)",
				},
				{
					url: "../images/20241111/slider07.jpg",
					title: "一站式解决你的电脑配置问题！！！",
					color: "rgb(53, 29, 25)",
				},
				{
					url: "../images/20241111/slider08.jpg",
					title: "谁不想和小猫咪贴贴呢！",
					color: "rgb(99, 72, 114)",
				},
			];

			// 1 获取要控制的元素 img 和 p
			const imgEle = document.querySelector("img");
			const pEle = document.querySelector("p");
			const divEle = document.querySelector(".slider-footer");
			const liList = document.querySelectorAll("li");
			// 2 定义一个图片的初始序号
			let index = 0;

			// 3 定时器开始
			// 1000毫秒后，图片序列要+1
			// 图片是有限的，不能无限加，最后一次后，重头开始
			const fn = setInterval(function () {
				if (index === sliderData.length) index = 0;

				imgEle.src = sliderData[index].url;
				pEle.innerText = sliderData[index].title;
				divEle.style.backgroundColor = sliderData[index].color;

				for (let i = 0; i < liList.length; i++) {
					liList[i].classList.remove("active");
				}
				liList[index].classList.add("active");

				index++;
			}, 1000);
		</script>
	</body>
</html>
